$ratio: 375 / 10;   //   375宽度下的, window.innerWidth / 10 ,这是rem的基准值 = html.style.fontSize
@function px2rem($px) { 
    // 具体px/基准值 = ？rem
    // 比如传入75px, 基准值是37.5，那么在显示器中就是2rem   
    // 同时在不同宽度的显示器中，2rem的大小都是不一样的，取决于各自根元素的font-size
    // 我们在375宽度，font-size为37.5的屏幕下完成开发，其它大小的屏幕会根据这个大小自动拉伸
    @return $px/$ratio + rem;
}


@mixin center { 
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin left { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
}

@mixin right { 
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@mixin ellipsis { 
    text-overflow: ellipsis;//text-overflow 属性规定当文本溢出包含元素时发生的事情，这里设置省略符号
    overflow: hidden;
    white-space: nowrap;//white-space 属性设置如何处理元素内的空白。这里设置不换行
}

@mixin ellipsis2($line) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
    white-space: normal; //只显示两行
    overflow: hidden;
    text-overflow: ellipsis;//文本超出就省略
    word-break: keep-all; //单词一定要写完才能换行
}